<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/4.detaile.css">
    <link rel="stylesheet" href="font_3425654_dzkifbkbxbn/iconfont.css">
</head>

<body>
    <top></top>
    <!-- 中心区域 -->
    <section>
        <!-- 左边的盒子 -->
        <div class="left">
            <!-- 左边上面第一个盒子区域 -->
            <div class="one">
                <span>筛选</span>
                <div class="reset">
                    <a href="javascript:;">重置</a>
                </div>
            </div>
            <!-- 左边上面第二个盒子区域 -->
            <div class="two">
                <div class="da">大类 <span class="iconfont icon-arrow-down"></span></div>
                <span>鞋类</span>
            </div>
            <!-- 左边上面第三个盒子区域 -->
            <div class="three">
                <div class="san">
                    <span>尺码</span>
                    <span class="iconfont icon-arrow-down
                " id="arrow-down"></span>
                    <span class="iconfont icon-jiantoushang" id="jiantoushang"></span>
                </div>
                <ul class="cma">
                    <li><a href="javascript:;">39</a></li>
                    <li><a href="javascript:;">40</a></li>
                    <li><a href="javascript:;">40.5</a></li>
                    <li><a href="javascript:;">41</a></li>
                    <li><a href="javascript:;">41.5</a></li>
                    <li><a href="javascript:;">42</a></li>
                    <li><a href="javascript:;">43</a></li>
                    <li><a href="javascript:;">44</a></li>
                </ul>
            </div>
            <!-- 左边上面第四个盒子区域 -->
            <!-- <div class="four">
                <div class="san">
                    <span>季节</span>
                    <span class="iconfont icon-arrow-down
                " id="arrow-down"></span>
                    <span class="iconfont icon-jiantoushang" id="jiantoushang"></span>
                </div> -->
            <!-- <ul class="cma">
                    <li><a href="javascript:;">夏季</a></li>
                    <li><a href="javascript:;">秋季</a></li>
                    <li><a href="javascript:;">冬季</a></li>

                </ul> -->
        </div>
        </div>
        <!-- 右边的盒子 -->
        <div class="right">
            <!-- 男子所有商品区域 -->
            <div class="All">
                <div class="man">男子所有商品(11)</div>
                <a href="javascript:;">
                    新品排序
                    <span class="iconfont icon-arrow-down"></span>
                </a>
            </div>
            <!-- 大图片区域 -->
            <ul class="big-img">
                <li class="daquyu">
                    <div class="quyu">
                        <a href="5.magnifier.html" class="tupian">
                            <img src="img/4-1.jpg" alt="">
                        </a>
                        <a href="5.magnifier.html" class="wenzi">【安踏冠军健身训练系列】安踏国家队同款科技星火男子氮科技缓震跑步训练跑鞋</a>
                        <div></div>
                        <a href="5.magnifier.html" class="money">
                            <span>￥799.00</span>
                        </a>
                    </div>
                </li>
                <li class="daquyu">
                    <div class="quyu">
                        <a href="5.magnifier.html" class="tupian">
                            <img src="img/4-2.jpg" alt="">
                        </a>
                        <a href="5.magnifier.html" class="wenzi">【安踏冠军健身训练系列】安踏国家队同款科技星火男子氮科技缓震跑步训练跑鞋</a>
                        <div></div>
                        <a href="5.magnifier.html" class="money">
                            <span>￥799.00</span>
                        </a>
                    </div>
                </li>
                <li class="daquyu">
                    <div class="quyu">
                        <a href="5.magnifier.html" class="tupian">
                            <img src="img/4-3.jpg" alt="">
                        </a>
                        <a href="5.magnifier.html" class="wenzi">【安踏冠军健身训练系列】安踏国家队同款科技星火男子氮科技缓震跑步训练跑鞋</a>
                        <div></div>
                        <a href="5.magnifier.html" class="money">
                            <span>￥649.00</span>
                        </a>
                    </div>
                </li>
                <li class="daquyu">
                    <div class="quyu">
                        <a href="5.magnifier.html" class="tupian">
                            <img src="img/4-4.jpg" alt="">
                        </a>
                        <a href="5.magnifier.html" class="wenzi">【安踏冠军健身训练系列】安踏国家队同款科技星火男子氮科技缓震跑步训练跑鞋</a>
                        <div></div>
                        <a href="5.magnifier.html" class="money">
                            <span>￥549.00</span>
                        </a>
                    </div>
                </li>
                <li class="daquyu">
                    <div class="quyu">
                        <a href="5.magnifier.html" class="tupian">
                            <img src="img/4-5.jpg" alt="">
                        </a>
                        <a href="5.magnifier.html" class="wenzi">【安踏冠军健身训练系列】安踏国家队同款科技星火男子氮科技缓震跑步训练跑鞋</a>
                        <div></div>
                        <a href="5.magnifier.html" class="money">
                            <span>￥369.00</span>
                        </a>
                    </div>
                </li>
                <li class="daquyu">
                    <div class="quyu">
                        <a href="5.magnifier.html" class="tupian">
                            <img src="img/4-6.jpg" alt="">
                        </a>
                        <a href="5.magnifier.html" class="wenzi">【安踏冠军健身训练系列】安踏国家队同款科技星火男子氮科技缓震跑步训练跑鞋</a>
                        <div></div>
                        <a href="5.magnifier.html" class="money">
                            <span>￥399.00</span>
                        </a>
                    </div>
                </li>
                <li class="daquyu">
                    <div class="quyu">
                        <a href="5.magnifier.html" class="tupian">
                            <img src="img/4-7.jpg" alt="">
                        </a>
                        <a href="5.magnifier.html" class="wenzi">【安踏冠军健身训练系列】安踏国家队同款科技星火男子氮科技缓震跑步训练跑鞋</a>
                        <div></div>
                        <a href="5.magnifier.html" class="money">
                            <span>￥439.00</span>
                        </a>
                    </div>
                </li>
                <li class="daquyu">
                    <div class="quyu">
                        <a href="5.magnifier.html" class="tupian">
                            <img src="img/4-8.jpg" alt="">
                        </a>
                        <a href="5.magnifier.html" class="wenzi">【安踏冠军健身训练系列】安踏国家队同款科技星火男子氮科技缓震跑步训练跑鞋</a>
                        <div></div>
                        <a href="5.magnifier.html" class="money">
                            <span>￥699.00</span>
                        </a>
                    </div>
                </li>
                <li class="daquyu">
                    <div class="quyu">
                        <a href="5.magnifier.html" class="tupian">
                            <img src="img/4-9.jpg" alt="">
                        </a>
                        <a href="5.magnifier.html" class="wenzi">【安踏冠军健身训练系列】安踏国家队同款科技星火男子氮科技缓震跑步训练跑鞋</a>
                        <div></div>
                        <a href="5.magnifier.html" class="money">
                            <span>￥599.00</span>
                        </a>
                    </div>
                </li>
                <li class="daquyu">
                    <div class="quyu">
                        <a href="5.magnifier.html" class="tupian">
                            <img src="img/4-10.jpg" alt="">
                        </a>
                        <a href="5.magnifier.html" class="wenzi">【安踏冠军健身训练系列】安踏国家队同款科技星火男子氮科技缓震跑步训练跑鞋</a>
                        <div></div>
                        <a href="5.magnifier.html" class="money">
                            <span>￥339.00</span>
                        </a>
                    </div>
                </li>
                <li class="daquyu">
                    <div class="quyu">
                        <a href="5.magnifier.html" class="tupian">
                            <img src="img/4-11.jpg" alt="">
                        </a>
                        <a href="5.magnifier.html" class="wenzi">【安踏冠军健身训练系列】安踏国家队同款科技星火男子氮科技缓震跑步训练跑鞋</a>
                        <div></div>
                        <a href="5.magnifier.html" class="money">
                            <span>￥369.00</span>
                        </a>
                    </div>
                </li>
                <li class="daquyu">
                    <div class="quyu">
                        <a href="5.magnifier.html" class="tupian">
                            <img src="img/4-12.jpg" alt="">
                        </a>
                        <a href="5.magnifier.html" class="wenzi">【安踏冠军健身训练系列】安踏国家队同款科技星火男子氮科技缓震跑步训练跑鞋</a>
                        <div></div>
                        <a href="5.magnifier.html" class="money">
                            <span>￥499.00</span>
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </section>
    <bottom></bottom>
</body>

</html>
<script src="js/jQuery.js"></script>
<script>
    $("top").load("1.header.html");
    $("bottom").load("1.bottom.html");
    //图片过于大防止出现横向滚定条;
    $(document).ready(function () {
        $("body").attr("style", "overflow-x:hidden");
    });
    // 左边上面第三个盒子区域的iconfont图标大盒子显示
    $("#jiantoushang").click(function () {
        $(this).css("height", "75px")
        $(".cma").show()
        $("#arrow-down").show();
        $("#jiantoushang").hide();

    })
    $("#arrow-down").click(function () {
        $(this).css("height", "300px")
        $(".cma").hide()
        $("#jiantoushang").show();
        $("#arrow-down").hide();
    })


</script>